<template>
    <div>
        <el-card class="box-card">

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <div>
                        <el-avatar :src="imgUrl" style="width: 150px;height: 150px;"></el-avatar>
                    </div>
                </div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <span>用户名: </span> <span>{{username}}</span>
                </div></el-col>
            </el-row>

            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <span>密码: </span>  <span>{{pwd}}</span>
                </div></el-col>
            </el-row>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                username: '11',
                pwd: '1111',
                imgUrl:''
            }
        },
        mounted() {
            this.init();
        },
        methods:{
            init(){
                this.axios.get("findAll/user/getUser").then(
                    r => {
                        this.username = r.data.name;
                        this.pwd = r.data.pwd;
                        this.imgUrl = "/findAll/img/"+r.data.faceImg
                    }
                )
            }
        }
    }
</script>

<style scoped>
    .box-card{
        height: 270px;
        margin-top: 10%;
        margin-left: 20%;
        margin-right: 30%;
    }
    span{
        margin-right: 20px;
    }
</style>